﻿<!-- saved from url=(0014)about:internet -->
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Simple upload example with resize/collapse</title>
	<link rel="stylesheet" href="styles.css">
<script type="text/javascript" src="Extra/jquery.min.js"></script> 
<!-- Replace JQuery source with the "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" (Most users has such file cached )-->

<!--
Resize/Collapse feature. 
If you dont need this feature then:
1. Remove JavaScript below and styles.
2. Remove DnRdiv but leave MultiPowUpload_holder stored in it.
3. Remove Collapse, Drag, Resize divs
 -->
<script type="text/javascript">
var MultiPowUploadMinWidth = 400;  //MultiPowUpload minimal width for resize
var MultiPowUploadMinHeight = 180; //MultiPowUpload minimal height for resize

/*
 * jqDnR - Minimalistic Drag'n'Resize for jQuery.
 * Copyright (c) 2007 Brice Burgess <bhb@iceburg.net>, http://www.iceburg.net
 * Licensed under the MIT License:
 * http://www.opensource.org/licenses/mit-license.php
 * $Version: 2007.08.19 +r2
 */

(function($){
$.fn.jqDrag=function(h){return i(this,h,'d');};
$.fn.jqResize=function(h){return i(this,h,'r');};
$.jqDnR={dnr:{},e:0,
drag:function(v){
 if(M.k == 'd')
 {
	E.css({left:M.X+v.pageX-M.pX,top:M.Y+v.pageY-M.pY});
 }
 else
 { 		
	var newwidth = Math.max(v.pageX-M.pX+M.W,0);
	var newheight = Math.max(v.pageY-M.pY+M.H,0);
	if(newwidth>=MultiPowUploadMinWidth)
		MultiPowUpload.width = newwidth-10;
	if(newheight>=MultiPowUploadMinHeight)
		MultiPowUpload.height = newheight-10;	
	if(newwidth>=MultiPowUploadMinWidth)
		E.css({width:newwidth});
	if(newheight>=MultiPowUploadMinHeight)
		E.css({height:newheight});	
	
 }
 return false;
 },
  
stop:function()
{
E.css('opacity',M.o);
$().unbind('mousemove',J.drag).unbind('mouseup',J.stop);
}
};
var J=$.jqDnR,M=J.dnr,E=J.e,
i=function(e,h,k){return e.each(function(){h=(h)?$(h,e):e;
 h.bind('mousedown',{e:e,k:k},function(v){var d=v.data,p={};E=d.e;
 // attempt utilization of dimensions plugin to fix IE issues
 if(E.css('position') != 'relative'){try{E.position(p);}catch(e){}}
 M={X:p.left||f('left')||0,Y:p.top||f('top')||0,W:f('width')||E[0].scrollWidth||0,H:f('height')||E[0].scrollHeight||0,pX:v.pageX,pY:v.pageY,k:d.k,o:E.css('opacity')};
 E.css({opacity:0.8});$().mousemove($.jqDnR.drag).mouseup($.jqDnR.stop);
 return false;
 });
});},
f=function(k){return parseInt(E.css(k))||false;};
})(jQuery);

function collapse()
{
	var CollapseHeight = 16;
	if ( typeof collapse.CollapseType == 'undefined' )
		collapse.CollapseType = "close";		
	if(collapse.CollapseType=="close")
	{
		collapse.DnRoriginalWidth = $('#DnRdiv').css("width");
		collapse.DnRoriginalHeight = $('#DnRdiv').css("height");
		collapse.MPUoriginalWidth = MultiPowUpload.width;
		collapse.MPUoriginalHeight = MultiPowUpload.height;
		
		MultiPowUpload.width=1;
		MultiPowUpload.height=1;
		$('#DnRdiv').css({width:collapse.MPUoriginalWidth, height:CollapseHeight});
		$('#collapsediv').css({background:"transparent url('images/collapseback.png') no-repeat"});
		collapse.CollapseType="open";
	}
	else
	{
		MultiPowUpload.width=collapse.MPUoriginalWidth;
		MultiPowUpload.height=collapse.MPUoriginalHeight;
		$('#DnRdiv').css({width:collapse.DnRoriginalWidth, height:collapse.DnRoriginalHeight});
		$('#collapsediv').css({background:"transparent url('images/collapse.png') no-repeat"});
		collapse.CollapseType="close";
	}
}

function MultiPowUpload_onMouseUp()
{
	$.jqDnR.stop();
}

function MultiPowUpload_onMovieLoad()
{
	$('#DnRdiv').jqDrag('.jqDrag').jqResize('.jqResize');
	$('#DnRdiv').css({width:MultiPowUpload.width});
}
</script>
<style>
.jqHandle {
   height:17px;
}

.jqDrag {
  width: 16px;
  position: absolute;
  bottom: 0;
  right: 16;
  cursor: move;
  background: transparent url('images/move.png') no-repeat;
  border-top:1px solid #CCC;
}

.jqResize {
  width: 16px;
  position: absolute;   
  bottom: 0;
  right: 0;
  cursor: se-resize;
  background: transparent url('images/resize.png') no-repeat;
  border-top:1px solid #CCC;
}

.jqDnR {
  z-index: 3;
  position: relative;
  padding-bottom: 18;
  background-color: #FFFFFF;
  border: 1px dashed #CCC;
}

.jqCollapse {
  width: 16px;
  position: absolute;   
  bottom: 0;
  right: 32;
  border-left:1px solid #CCC;
  background: transparent url('images/collapse.png') no-repeat;
  border-top:1px solid #CCC;
  cursor:pointer;
}

</style>	
<!-- End of collapse/resize feature code -->	
</head>
<body>
Sample: <b>simpleuploadwithresize.html</b>&nbsp;&nbsp;<a href="javascript:location.reload(true);"><img border="0" src="images/refresh.png" width="16" height="16">&nbsp;Refresh frame</a>&nbsp;&nbsp;<a target="_parent" href="index.htm"><img border="0" src="images/home.png" width="16" height="16">&nbsp;Examples home</a><br/><br/>
<!-- text below wil be shown if JavaScript disabled at browser -->
<span id="noscriptdiv" style="border:1px  solid #FF0000;display:block;padding:5px;text-align:left; background: #FDF2F2;color:#000;">Active Scripting (JavaScript) should be enabled in your browser for this application to function properly!</span>
<script type="text/javascript">
	document.getElementById('noscriptdiv').style.visibility = 'hidden';
	document.getElementById('noscriptdiv').style.height = 0;
	document.getElementById('noscriptdiv').style.padding = 0;
	document.getElementById('noscriptdiv').style.border = 0;
</script>

It is a simple example of uploading with the help of  Flash uploader MultiPowUpload.  
MultiPowUpload object loaded by <a href="http://code.google.com/p/swfobject/" target="_blank">SWFobject</a> JavaScript. SWFobject helps not to duplicate MultiPowUpload parameters for both OBJECT and EMBED but requires JavaScript enabled.<br/>
This example also has JavaScript resize/collapse feature.<br/>
If you want to offer  MultiPowUpload working even if JavaScript is disabled then use <a href="simpleupload.html">simpleupload.html</a> example.

<p>For the  example you need to specify script URL that accept the files. Open the example  in a text editor and specify the property value &quot;uploadUrl&quot; of  MultiPowUpload object. The value can be:</p>

<ul>
  <li>For ASP: <code>FileProcessingScripts/ASP/ClearASP/uploadfiles.asp</code></li>
  <li>For PHP : <code>FileProcessingScripts/PHP/uploadfiles.php</code>&nbsp;<strong>(Default value)</strong></li>
  <li>For ASP.NET (C Sharp): <code>FileProcessingScripts/ASP.NET/CSharp/uploadfiles.aspx</code></li>
  <li>For ASP.NET (VB.NET): <code>FileProcessingScripts/ASP.NET/VBNET/uploadfiles.aspx</code></li>
   <li>For Perl : <code>FileProcessingScripts/PERL/uploadfiles.pl</code></li>
   <li>For Cold Fusion : <code>FileProcessingScripts/ColdFusion/uploadfiles.cfm</code></li>
   <li>For JSP : <code>FileProcessingScripts/JSP/uploadfiles.jsp</code></li>
</ul>

<div id="DnRdiv" class="jqDnR">
<div id="MultiPowUpload_holder">
<strong>You need at least 10 version of Flash player!</strong>
<a href="http://www.adobe.com/go/getflashplayer">&nbsp;<img border="0" src="images/get_flash_player.gif" alt="Get Adobe Flash player" /></a>
</div>
<div id="collapsediv" onClick="javascript:collapse();" title="Collapse control" class="jqHandle jqCollapse"></div>
<div title="Drag control" class="jqHandle jqDrag"></div>
<div title="Resize control" class="jqHandle jqResize"></div>
</div>

<!-- SWFObject home page: http://code.google.com/p/swfobject/
You can replace src value with the http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js (Most users has such file cached)
 -->
<script type="text/javascript" src="Extra/swfobject.js"></script>
<script type="text/javascript">

	var params = {  
		BGColor: "#FFFFFF"
	};
	
	var attributes = {  
		id: "MultiPowUpload",  
		name: "MultiPowUpload"
	};
	
	var flashvars = {		
		"debug.enabled":"true",
	  "serialNumber": "put your serial number here",
	  "uploadUrl": "FileProcessingScripts/PHP/uploadfiles.php",
	  "useExternalInterface": "true"	 
	};
	
//Default MultiPowUpload should have minimum width=410 and minimum height=180
swfobject.embedSWF("ElementITMultiPowUpload.swf", "MultiPowUpload_holder", "420", "250", "10.0.0", "Extra/expressInstall.swf", flashvars, params, attributes);

	function MultiPowUpload_onServerResponse(li)
	{	
		var responselable = document.getElementById("serverresponse");		
		responselable.innerHTML += "<strong>" + li.serverResponse + "</strong>";		
	}
	
</script><br/>
You should see server reponse below when upload complete:<br/>

<br />The file uploader doesn’t work? See <a target="_blank" href="http://www.element-it.com/OnlineHelpMulti/MultiPowUpload_Manual_HTML/Troubleshooting.html">here</a> what you need for its proper work. 

</body>
</html>